<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="community-page bg-gray-50 min-h-screen">
    <!-- District/County Selector -->
    <view class="bg-white sticky top-0 z-10 shadow-sm">
      <view class="px-2 py-3 flex justify-between items-center border-b">
        <view class="text-lg font-bold text-gray-800">上饶社区</view>
        <view class="flex items-center">
          <Search class="w-5 h-5 text-gray-500 mr-3" />
          <Bell class="w-5 h-5 text-gray-500" />
        </view>
      </view>

      <view class="district-selector overflow-x-auto">
        <view class="flex whitespace-nowrap py-3 px-2">
          <view
            v-for="district in districts"
            :key="district.id"
            class="px-2 py-1.5 mx-1 rounded-full text-sm font-medium transition-colors"
            :class="
              activeDistrict === district.id
                ? 'bg-orange-500 text-white'
                : 'bg-gray-100 text-gray-700'
            "
            @click="setActiveDistrict(district.id)"
          >
            {{ district.name }}
          </view>
        </view>
      </view>
    </view>

    <!-- Community Content -->
    <view class="px-2 py-4">
      <!-- Featured Banner -->
      <view class="relative rounded-lg overflow-hidden mb-4">
        <img
          :src="activeDistrictData.banner"
          :alt="`${activeDistrictData.name}景点`"
          class="w-full h-40 object-cover"
        />
        <view class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
          <view class="p-2 text-white">
            <view class="text-xl font-bold">{{ activeDistrictData.name }}社区</view>
            <view class="text-sm opacity-90">{{ activeDistrictData.description }}</view>
          </view>
        </view>
      </view>

      <!-- Community Stats -->
      <view class="bg-white rounded-lg p-2 mb-4 flex justify-between">
        <view class="text-center">
          <view class="text-orange-500 font-bold text-xl">
            {{ activeDistrictData.stats.members }}
          </view>
          <view class="text-gray-500 text-sm">社区成员</view>
        </view>
        <view class="text-center">
          <view class="text-orange-500 font-bold text-xl">
            {{ activeDistrictData.stats.posts }}
          </view>
          <view class="text-gray-500 text-sm">帖子数量</view>
        </view>
        <view class="text-center">
          <view class="text-orange-500 font-bold text-xl">
            {{ activeDistrictData.stats.activities }}
          </view>
          <view class="text-gray-500 text-sm">近期活动</view>
        </view>
      </view>

      <!-- Announcements -->
      <view class="bg-white rounded-lg p-2 mb-4">
        <view class="flex justify-between items-center mb-3">
          <view class="font-bold text-gray-800">社区公告</view>
          <view class="text-sm text-gray-500">查看全部</view>
        </view>
        <view class="space-y-3">
          <view
            v-for="(announcement, index) in activeDistrictData.announcements"
            :key="index"
            class="flex items-start"
          >
            <view
              class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0 mr-3"
            >
              <Megaphone class="w-4 h-4 text-orange-500" />
            </view>
            <view>
              <view class="font-medium text-gray-800">{{ announcement.title }}</view>
              <view class="text-sm text-gray-500">{{ announcement.date }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- Recent Posts -->
      <view class="bg-white rounded-lg p-2 mb-4">
        <view class="flex justify-between items-center mb-3">
          <view class="font-bold text-gray-800">最新帖子</view>
          <view class="text-sm text-gray-500">查看全部</view>
        </view>
        <view class="space-y-4">
          <view
            v-for="(post, index) in activeDistrictData.posts"
            :key="index"
            class="border-b border-gray-100 pb-4 last:border-0 last:pb-0"
          >
            <view class="flex items-center mb-2">
              <img
                :src="post.author.avatar"
                :alt="post.author.name"
                class="w-6 h-6 rounded-full mr-2"
              />
              <text class="text-sm font-medium">{{ post.author.name }}</text>
              <text class="text-xs text-gray-500 ml-auto">{{ post.time }}</text>
            </view>
            <view class="text-gray-800 mb-2">{{ post.content }}</view>
            <view v-if="post.image" class="mb-2">
              <img :src="post.image" alt="Post image" class="w-full rounded-lg" />
            </view>
            <view class="flex items-center text-gray-500 text-sm">
              <view class="flex items-center mr-4">
                <ThumbsUp class="w-4 h-4 mr-1" />
                {{ post.likes }}
              </view>
              <view class="flex items-center mr-4">
                <MessageSquare class="w-4 h-4 mr-1" />
                {{ post.comments }}
              </view>
              <view class="flex items-center">
                <Share2 class="w-4 h-4 mr-1" />
                分享
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Community Activities -->
      <view class="bg-white rounded-lg p-2 mb-4">
        <view class="flex justify-between items-center mb-3">
          <view class="font-bold text-gray-800">社区活动</view>
          <view class="text-sm text-gray-500">查看全部</view>
        </view>
        <view class="space-y-3">
          <view
            v-for="(activity, index) in activeDistrictData.activities"
            :key="index"
            class="flex"
          >
            <view
              class="w-12 h-12 bg-orange-100 rounded-lg flex flex-col items-center justify-center text-orange-500 mr-3 flex-shrink-0"
            >
              <text class="text-xs">{{ activity.date.month }}</text>
              <text class="font-bold">{{ activity.date.day }}</text>
            </view>
            <view>
              <view class="font-medium text-gray-800">{{ activity.title }}</view>
              <view class="text-sm text-gray-500">
                <MapPin class="w-3 h-3 inline-block mr-1" />
                {{ activity.location }}
              </view>
              <view class="flex items-center mt-1">
                <view class="flex -space-x-2">
                  <img
                    v-for="(participant, i) in activity.participants.slice(0, 3)"
                    :key="i"
                    :src="participant"
                    alt="Participant"
                    class="w-5 h-5 rounded-full border border-white"
                  />
                </view>
                <text class="text-xs text-gray-500 ml-2">
                  {{ activity.participantCount }}人参与
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <ProductDetailModal ref="productDetailModal" />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import ProductDetailModal from '@/components/ProductDetailModal.vue'
import {
  Search,
  Bell,
  Megaphone,
  ThumbsUp,
  MessageSquare,
  Share2,
  MapPin,
  Home,
  Users,
  PlusCircle,
  User,
} from 'lucide-vue-next'

// Districts/Counties data
const districts = [
  { id: 'xinzhou', name: '信州区' },
  { id: 'guangfeng', name: '广丰区' },
  { id: 'shangrao', name: '上饶县' },
  { id: 'yushan', name: '玉山县' },
  { id: 'yanshan', name: '铅山县' },
  { id: 'hengfeng', name: '横峰县' },
  { id: 'yiyang', name: '弋阳县' },
  { id: 'wuyuan', name: '婺源县' },
  { id: 'wannian', name: '万年县' },
  { id: 'yugan', name: '余干县' },
  { id: 'poyang', name: '鄱阳县' },
  { id: 'dexing', name: '德兴市' },
]

// Active district
const activeDistrict = ref('xinzhou')

const productDetailModal = ref(null)

const setActiveDistrict = (districtId) => {
  activeDistrict.value = districtId
}

// District data (mock data for demonstration)
const districtData = {
  xinzhou: {
    name: '信州区',
    description: '上饶市中心城区，历史文化底蕴深厚',
    banner:
      'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png?height=300&width=600',
    stats: {
      members: '12.5万',
      posts: '3.2万',
      activities: '42',
    },
    announcements: [
      { title: '信州区2023年社区文化节即将开幕', date: '2023-10-15' },
      { title: '关于信州区老旧小区改造工程的通知', date: '2023-10-10' },
    ],
    posts: [
      {
        author: {
          name: '城市观察者',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        time: '10分钟前',
        content: '今天在信州公园看到很多市民在晨练，环境真的很好，空气清新，是休闲的好去处！',
        image:
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png?height=300&width=600',
        likes: 28,
        comments: 6,
      },
      {
        author: {
          name: '美食达人',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        time: '2小时前',
        content: '推荐信州区这家新开的餐厅，菜品很有特色，价格也实惠，周末可以去尝尝！',
        image: null,
        likes: 45,
        comments: 12,
      },
    ],
    activities: [
      {
        title: '信州区社区文化节',
        date: { month: '10月', day: '20' },
        location: '信州区文化中心',
        participantCount: 156,
        participants: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
      },
      {
        title: '健康义诊活动',
        date: { month: '10月', day: '25' },
        location: '信州区社区医院',
        participantCount: 89,
        participants: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
      },
    ],
  },
  wuyuan: {
    name: '婺源县',
    description: '中国最美乡村，徽派建筑与油菜花的故乡',
    banner:
      'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png?height=300&width=600',
    stats: {
      members: '8.3万',
      posts: '2.7万',
      activities: '38',
    },
    announcements: [
      { title: '婺源县2023年秋季旅游节活动安排', date: '2023-10-12' },
      { title: '关于婺源县乡村振兴示范项目的公示', date: '2023-10-05' },
    ],
    posts: [
      {
        author: {
          name: '旅行摄影师',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        time: '30分钟前',
        content: '婺源的秋天太美了，层林尽染，拍了一组照片分享给大家！',
        image:
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png?height=300&width=600',
        likes: 76,
        comments: 15,
      },
      {
        author: {
          name: '乡村生活',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        time: '5小时前',
        content: '今天去了婺源的篁岭，晒秋的场景非常壮观，推荐大家有时间一定要去看看！',
        image:
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png?height=300&width=600',
        likes: 92,
        comments: 24,
      },
    ],
    activities: [
      {
        title: '婺源油菜花摄影大赛',
        date: { month: '3月', day: '15' },
        location: '婺源县文化馆',
        participantCount: 203,
        participants: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
      },
      {
        title: '徽派建筑保护讲座',
        date: { month: '10月', day: '30' },
        location: '婺源县图书馆',
        participantCount: 67,
        participants: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
      },
    ],
  },
  guangfeng: {
    name: '广丰区',
    description: '赣东北重要的经济中心，素有"赣东北明珠"之称',
    banner:
      'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png?height=300&width=600',
    stats: {
      members: '9.8万',
      posts: '2.1万',
      activities: '35',
    },
    announcements: [
      { title: '广丰区2023年农产品展销会通知', date: '2023-10-18' },
      { title: '关于广丰区城市基础设施改造工程的公告', date: '2023-10-08' },
    ],
    posts: [
      {
        author: {
          name: '本地达人',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        time: '1小时前',
        content: '广丰的梨子熟了，今天去采摘了一些，又大又甜，有需要的可以联系我！',
        image:
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png?height=300&width=600',
        likes: 53,
        comments: 18,
      },
      {
        author: {
          name: '城市规划师',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        time: '1天前',
        content: '广丰区最近的城市建设发展很快，特别是新开发的商业区，变化真大！',
        image: null,
        likes: 37,
        comments: 9,
      },
    ],
    activities: [
      {
        title: '广丰梨文化节',
        date: { month: '9月', day: '25' },
        location: '广丰区农业展览中心',
        participantCount: 178,
        participants: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
      },
      {
        title: '广丰区创业创新大赛',
        date: { month: '11月', day: '10' },
        location: '广丰区科技园',
        participantCount: 112,
        participants: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
      },
    ],
  },
}

// For other districts, use xinzhou data as fallback
const getDistrictData = (districtId) => {
  return (
    districtData[districtId] || {
      ...districtData.xinzhou,
      name: districts.find((d) => d.id === districtId)?.name || '未知区域',
    }
  )
}

const activeDistrictData = computed(() => {
  return getDistrictData(activeDistrict.value)
})
</script>

<style scoped>
.district-selector {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.district-selector::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}
</style>
